/*
选择器        写法                      示例                      示例说明
--------------------------------------------------------------
元素选择器    元素名称 {...}           h1 {...}                选择页面上所有的<h1>标签
类选择器      .class属性值 {...}      .cls {...}              选择页面上所有class为cls的标签
id选择器      #id属性值 {...}         #hid {...}              选择页面上id为hid的标签
分组选择器    选择器1,选择器2{...}    h1,h2 {...}             选择页面上所有的<h1>和<h2>标签
属性选择器    元素名称[属性] {...}    input[type] {...}       选择页面上有type属性的<input>标签
             元素名称[属性="值"] {...} input[type="text"] {...} 选择页面上type属性为text的<input>标签
后代选择器    元素1 元素2 {...}       form input {...}        选择<form>标签内的所有<input>标签
*/

/* 设置所有超链接样式 */
a {
    /* 取消下划线效果 */
    text-decoration: none;
}

/* 选中 class="box" 的元素 */
.box {
    background-color: lightblue;
}

/* 选中 id="header" 的元素 */
#header {
    font-size: 24px;
}

/* 选中 div 内的所有 p */
div p {
    color: green;
}

/* 选中鼠标悬停的链接 */
a:hover {
    text-decoration: underline;
}

/* 选中 input 获得焦点时的样式 */
input:focus {
    border: 2px solid blue;
}
